import React, { useState, useEffect } from "react";
import Filter from "./Filter";
import { Spin } from "antd";
import { useSelector } from "react-redux";
import { Context } from "./context";
import dayjs from 'dayjs'
import Container from '@/appComponents/Container'
import EchartsHome from "./EchartsHome";
import {
  getEleData, getRank, getEntData,
  getEntRingData,
  getAnalysisGeneral,
  getAnalysisDeviceType
} from "&/api/electricity";
import { useRef } from "react";








const Substance = ({ entValue }) => {
  const lastEntValue = entValue && entValue[entValue.length - 1]
  const FirstEntValue = entValue && entValue[0]


  const record = useSelector((state) => state.getRecordReducer)
  const [devType, setDevType] = useState([])
  const [loading, setLoading] = useState(false);
  const [eleData, setEleData] = useState();
  const [entData, setEntData] = useState();
  const [rankData, setrankData] = useState();
  const [entRingData, setEntRingData] = useState();
  const [generalData, setGeneralData] = useState();

  const e = `YYYY-MM-DD HH:00:00`
  const endE = `YYYY-MM-DD HH:59:59`

  const [paramsData, setParamsData] = useState({
    entId: lastEntValue?.entId && lastEntValue.entId,
    start_time: dayjs().subtract(1, 'day').format(e),
    end_time: dayjs().format(endE),
    data_type_id: 8,
    time_type: '2',
    format_type: 1,
    dev_type: null,
    ent_name: lastEntValue?.entName && lastEntValue.entName,
  })
  const initialDev = useRef(null)


  useEffect(() => {
    setLoading(true)
    if (entValue) {
      getDevType()
      if(initialDev.current || paramsData.dev_type){
      getData()}
    }

  }, [entValue,initialDev.current])

  const getDevType = async () => {
    if (entValue.length === 1) {
      const res = await getAnalysisDeviceType({
        ent_id: lastEntValue.entId,
      })
      setParamsData(state => ({
        ...state,
        dev_type: res[0].dev_type
      }));
      setDevType(res)
      initialDev.current = res[0].dev_type
    }
  }

  const getData = async () => {
    const nowDevType = paramsData.dev_type ? paramsData.dev_type : initialDev.current
    if (lastEntValue?.entId && nowDevType) {
      setLoading(true);
      setGeneralData();
      setEleData();
      setEntData();
      setEntRingData();
      setrankData();
      const promises = [
        //用电、行业数据
        getEleData({
          start_time: paramsData.start_time,
          end_time: paramsData.end_time,
          time_type: paramsData.time_type,
          dev_type: nowDevType,
        }),
        //排名
        getRank({
          ent_id: lastEntValue.entId,
          start_time: paramsData.start_time,
          end_time: paramsData.end_time,
          time_type: paramsData.time_type,
          dev_type: nowDevType,
        }),
        //企业聚合用电
        getEntData({
          ent_id: lastEntValue.entId,
          start_time: paramsData.start_time,
          end_time: paramsData.end_time,
          time_type: paramsData.time_type,
        }),
        //用电同环比
        getEntRingData({
          ent_id: FirstEntValue.entId,
          start_time: paramsData.start_time,
          end_time: paramsData.end_time,
          time_type: paramsData.time_type,
        }),
        getAnalysisGeneral({
          ent_id: FirstEntValue.entId,
          start_time: paramsData.start_time,
          end_time: paramsData.end_time,
          time_type: paramsData.time_type,
          dev_type: nowDevType,
        }),
      ];

      const [eleData, rankData, entData, entRingData, generalData] = await Promise.all(promises);
      setGeneralData(generalData);
      setEleData(eleData);
      setEntData(entData);
      setEntRingData(entRingData);
      setrankData(rankData);

      setLoading(false);
    }

  };

  return (
    <Spin tip="Loading......" spinning={loading}>
      <div style={{ height: "100%" }}>
        <Context.Provider value={{ entValue, paramsData, eleData, entData, entRingData, rankData, generalData }} >

          <Container>
            <Container.ContainerQuery title="查询条件">
              <Filter
                devInfo={devType}
                onQuery={getData}
                paramsData={paramsData}
                setParamsData={setParamsData}
              />
            </Container.ContainerQuery>
            <Container.ContainerContent
              title="查询结果"
            >
              <EchartsHome />
            </Container.ContainerContent>

          </Container>
        </Context.Provider>
      </div>
    </Spin>)
}

export default Substance;